<template>
	<view class="content">
		<view class="b-img"  v-if="cardInfos.length>0"></view>
		<view class="box" v-if="cardInfos.length>0">
		<view class="top">
			<view class="top-l">12,000.00</view>
			<view class="top-r">
				<select style="border: none;margin-left: 120upx;font-size: 30upx;">
					 <option v-for="item in options">{{item.label}}</option>
				</select>
			</view>
		</view>
		<view class="bottom">
			<view class="card" v-for="item in cardInfos">
				<view class="card-l">{{item.name}}</view>
				<image src="../../static/img/question.png" style="width: 40upx;height: 40upx;position: absolute;left: 110upx;top: 22upx;" v-if="item.id==2"></image>
				<view class="card-r">{{item.num}}</view>
			</view>
		</view>
		</view>
		<view v-else class="no-data">
			<image src="../../static/img/no-data.png" mode=""></image>
			<text class="datas">暂无数据~</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				value: '',
				options: [
					{
						value: '选项1',
						label: '2020年7月'
					},
					{
						value: '选项2',
						label: '2020年6月'
					},
					{
						value: '选项3',
						label: '2020年5月'
					}
				],
				cardInfos:[
					{
					id:1,
					name:'基本工资',
					num:'8,000.00'
				},{
					id:1,
					name:'岗位工资',
					num:'8,000.00'
				},{
					id:1,
					name:'绩效工资',
					num:'8,000.00'
				},{
					id:1,
					name:'交通补贴',
					num:'8,000.00'
				},{
					id:1,
					name:'伙食补贴',
					num:'8,000.00'
				},{
					id:1,
					name:'通讯补贴',
					num:'8,000.00'
				},{
					id:1,
					name:'设备补贴',
					num:'8,000.00'
				},{
					id:1,
					name:'高定工资',
					num:'8,000.00'
				},{
					id:1,
					name:'额定工资',
					num:'8,000.00'
				},{
					id:1,
					name:'工龄工资',
					num:'8,000.00'
				},{
					id:1,
					name:'职称工资',
					num:'8,000.00'
				},
				{
					id:1,
					name:'学历补贴',
					num:'8,000.00'
				},
				{
					id:1,
					name:'社保',
					num:'8,000.00'
				},
				{
					id:1,
					name:'公积金',
					num:'8,000.00'
				},
				{
					id:1,
					name:'补发',
					num:'8,000.00'
				},
				{
					id:2,
					name:'扣款',
					num:'8,000.00'
				},
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	page{
	background: #f3f3f3;
	}
	.b-img{
		width: 100%;
		height: 120upx;
		background: #007AFF;
		border-radius: 0 0 35upx 35upx;
	}
	.content {
		width: 100%;
		background: #f3f3f3;
	}
	.box{
	width: 93%;
	height: auto;
	background-color: #fff;
	border-radius: 15upx;
	margin: -120upx auto 20upx;	
	}
	.top{
		width: 100%;
		height: 120upx;
		/* background: red; */
		display: flex;
		flex-wrap: nowrap;
		padding: 0 25upx;
	}
	.top-l{
		width: 50%;
		height: 120upx;
		line-height: 120upx;
		font-size: 32upx;
	}
	.top-r{
		width: 50%;
		height: 120upx;
		line-height: 120upx;
		/* text-align: right; */
		/* margin-right: -30upx; */
		font-size: 32upx;
	}
	.bottom{
		width: 100%;
		height: auto;
	    display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.card{
		width: 50%;
		height: 150upx;
		/* background: red; */
		padding: 0 25upx;
		box-sizing: border-box;
		border: 0.5px solid #eee;
		position: relative;
	}
	.card-l{
		width: 100%;
		height: 70upx;
		line-height: 80upx;
		font-size: 30upx;
		/* background: pink; */
		
	}
		.card-r{
			width: 100%;
			height: 80upx;
			line-height: 60upx;
			font-size: 30upx;
			color: #999;
			/* background: pink; */
		}
		.no-data{
			width: 100%;
			height: 360upx;
			/* background: red; */
			margin-top: 300upx;
			position: relative;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.no-data image{
			width: 200upx;
			height:150upx;
			position: absolute;
			left: 36%;
		}
		.datas{
			width: 100%;
			height: 60upx;
			line-height: 60upx;
			text-align: center;
			position: absolute;
			top: 160upx;
			font-size: 28upx;
			color: #999;
		}
</style>
